import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
import "../components"
import "../Utils.js" as Utils

Item {
    width: parent.width - 10
    height: parent.height
    property real songListId: 0
    property var theme: p_theme.currentTheme()
    property double fontSize: 9

    property var playeListInfo: ({
            id: 0,
            name: "",
            //歌单名称
            coverImgUrl: "",
            //封面地址
            trackCount: "",
            //歌单数量
            description: "",
            //介绍
            lastUpdateDate: 0,
            //上次更新歌单时间
            tags: '',
            //标签
            playCount: 0,
            //播放数量
            shareCount: 0,
            //分享数量
            commentCount: 0,
            //评论数量
            tracks: []                                 //歌曲列表
        })
    property bool loading: false

    Component.onCompleted: {
        this.songListId = leftContent.pageParam.id;
        this.getData();
    }
    function getData() {
        // print(JSON.stringify(leftContent.pageParam))
        // print(this.songListId)
        loading = true;
        p_musicRes.getPlayerListDetail(this.songListId).then(res => {
            loading = false;
            playeListInfo = res;
            tracks.clear();
            tracks.append(res.tracks);
            loading = false;
        });
    }

    ListModel {
        id: tracks
        property var jsArray: convertModelToArray()
        function convertModelToArray() {
            return Utils.listModelToJsArray(this, ["id", "name", 'artists', 'coverImage', 'allTime', 'vip']);
        }
    }

    ListView {
        id: listView
        anchors.fill: parent
        clip: true
        ScrollBar.vertical: CScrollBar {}
        model: tracks
        delegate: contentListViewDelegate
        header: Column {
            width: parent.width
            height: 240
            Component.onCompleted: {
                let h = 0;
                for (let i = 0; i < children.length; i++) {
                    h += children[i].height;
                }
                height = h;
            }

            Rectangle {
                id: header
                color: "#ffffff"
                height: 200
                width: parent.width
                RoundedImage {
                    id: playerListCoverImage
                    size: 180
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    source: playeListInfo.coverImgUrl === '' ? '' : `${playeListInfo.coverImgUrl}?param=${width}y${height}`
                }
                Column {
                    id: playerListContext
                    // anchors.fill: parent
                    spacing: 5
                    width: parent.width - playerListCoverImage.width - 50
                    height: 180
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: playerListCoverImage.right
                    anchors.leftMargin: 20
                    Text {
                        id: playerListTitleText
                        width: parent.width
                        font.pointSize: 16
                        font.weight: Font.Bold
                        color: theme.fontColor
                        elide: Text.ElideRight
                        wrapMode: Text.Wrap
                        text: playeListInfo.name
                        lineHeight: 1.2
                    }
                    Flickable {
                        height: parent.height - playerListTitleText.contentHeight
                        width: parent.width - 10
                        contentHeight: playerListDescription.contentHeight
                        clip: true
                        ScrollBar.vertical: CScrollBar {
                            opacity: 0.7
                        }
                        Text {
                            id: playerListDescription
                            width: parent.width - 15
                            font.pointSize: 10
                            color: theme.fontColor
                            opacity: 0.8
                            wrapMode: Text.Wrap
                            elide: Text.ElideRight
                            lineHeight: 1
                            text: playeListInfo.description
                        }
                    }
                }
            }

            Rectangle {
                color: "#ffffff"
                width: parent.width
                height: 70
                ToolTipButton {
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    size: 60
                    iconScale: 0.9
                    iconSource: "qrc:/icon/player.svg"
                    onClick: {
                        const i = Math.floor(Math.random() * tracks.jsArray.length);
                        playContent.requestPlay(tracks.jsArray[i], tracks.jsArray);
                    }
                }
                Row {
                    id: playerHeaderBottomRow
                    height: 40
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    spacing: 20
                    Item {
                        width: children[0].contentWidth + 18
                        height: children[0].contentHeight + 10
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            anchors.centerIn: parent
                            color: theme.fontColor
                            font.pointSize: 9
                            font.italic: true
                            text: "播放量：" + playeListInfo.playCount
                        }
                    }
                    Item {
                        width: children[0].contentWidth + 18
                        height: children[0].contentHeight + 10
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            anchors.centerIn: parent
                            color: theme.fontColor
                            font.pointSize: 9
                            font.italic: true
                            text: "分享次数：" + playeListInfo.shareCount
                        }
                    }
                    Item {
                        width: children[0].contentWidth + 18
                        height: children[0].contentHeight + 10
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            anchors.centerIn: parent
                            color: theme.fontColor
                            font.pointSize: 9
                            font.italic: true
                            text: "评论数量：" + playeListInfo.commentCount
                        }
                    }
                }
            }

            Rectangle {
                id: listHeader
                width: listView.width - 20
                height: 40
                Row {
                    height: parent.height
                    width: parent.width - 20
                    anchors.horizontalCenter: parent.horizontalCenter
                    opacity: 0.8
                    Text {
                        color: theme.fontColor
                        font.pointSize: fontSize
                        width: parent.width * 0.2 - 80
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.italic: true
                        font.bold: true
                        text: "#"
                    }
                    Text {
                        color: theme.fontColor
                        font.pointSize: fontSize
                        width: 80
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignHCenter
                        text: "封面"
                    }
                    Text {
                        color: theme.fontColor
                        font.pointSize: fontSize
                        width: parent.width * 0.25
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignLeft
                        elide: Text.ElideRight
                        text: "歌曲名称"
                    }

                    Text {
                        color: theme.fontColor
                        font.pointSize: fontSize
                        width: parent.width * 0.3
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignVCenter
                        elide: Text.ElideRight
                        text: "作曲家"
                    }
                    Text {
                        color: theme.fontColor
                        font.pointSize: fontSize
                        width: parent.width * 0.25 - 80
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignHCenter
                        elide: Text.ElideRight
                        text: "时长"
                    }
                }
            }
        }
    }
    Component {
        id: contentListViewDelegate
        MusicRow {
            parentWidth: listView.width - 20
            playList: tracks.jsArray
            playInfo: Utils.modelToJsObj(model, ["id", "name", 'artists', 'coverImage', 'allTime', 'vip'])
            index: model.index
            // function isShow() {
            //     let top = header.height + listHeader.height;
            //     //视口
            //     const viewport = {
            //         y1: flickable.contentY,
            //         y2: flickable.contentY + flickable.height
            //     };
            //     const y1 = top + index * height;
            //     const y2 = y1 + height;
            //     //显示 y范围
            //     const displayRange = {
            //         y1: y1,
            //         y2: y2
            //     };
            //     if (viewport.y1 > displayRange.y2 || viewport.y2 < displayRange.y1) {
            //         return false;
            //     }
            //     return true;
            // }
            // y: header.height + listHeader.height + index * height
        }
    }
    Loading {
        load: parent.loading
    }
}
